<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>客户信息维护</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../../re/element-ui/theme-chalk/index.css">
    
</head>
<body>

    <div id="app">

        <el-breadcrumb separator="/">
            <el-breadcrumb-item>基础信息</el-breadcrumb-item>
            <el-breadcrumb-item><a href="#">客户信息</a></el-breadcrumb-item>
        </el-breadcrumb>

        <el-form :inline="true" :model="query">
            <el-form-item label="编号">
                <el-input v-model="query.cus_id"></el-input>
            </el-form-item>
            <el-form-item label="名称">
                <el-input v-model="query.cus_name"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="query.cus_remark"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click.prevent="getCustomerPage(1)">查询</el-button>
            </el-form-item>
        </el-form>

        <el-button type="primary" @click="openCusAddWin">新增</el-button>
        <el-button type="primary" @click="cusExecDel">删除</el-button>


        <el-table :data="page.rows" style="width: 100%"  @selection-change="onSelectionChange"  >
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="cus_id" label="客户编号" width="180">
            </el-table-column>
            <el-table-column prop="cus_name" label="客户名称" width="180">
            </el-table-column>
            <el-table-column prop="cus_remark" label="客户备注">
            </el-table-column>
            </el-table-column>
            <el-table-column prop="cus_status_str" label="客户状态">
            </el-table-column>


            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="openCusUpdWin(scope.row)" type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>

        </el-table>

        <el-pagination layout="sizes, prev, pager, next, jumper, ->, total" :page-sizes="[3,5,8,10,15,20]"
            :page-size.sync="page.pageSize" :total="page.total" @current-change="onCurrentChange"
            :current-page.sync="page.pageNum" @size-change="onSizeChange">
        </el-pagination>


        <!-- 新增对话框 -->
        <el-dialog title="新增客户信息" :visible.sync="cusAddWinVisible">
            <el-form :model="newCus">
                <el-form-item label="客户名称" :label-width="'120px'">
                    <el-input v-model="newCus.cus_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="客户备注" :label-width="'120px'">
                    <el-input v-model="newCus.cus_remark" autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer">
                <el-button @click="cusAddWinVisible = false">取 消</el-button>
                <el-button type="primary" @click="cusExecAdd">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 修改对话框 -->
        <el-dialog title="新增客户信息" :visible.sync="cusUpdWinVisible">
            <el-form :model="oldCus">
                <el-form-item label="客户名称" :label-width="'120px'">
                    <el-input v-model="oldCus.cus_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="客户备注" :label-width="'120px'">
                    <el-input v-model="oldCus.cus_remark" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="客户状态" :label-width="'120px'">
                    <el-input v-model="oldCus.cus_status_str" autocomplete="off"></el-input>
                </el-form-item>


            </el-form>
            <div slot="footer">
                <el-button @click="cusUpdWinVisible = false">取 消</el-button>
                <el-button type="primary" @click="cusExecUpd">确 定</el-button>
            </div>
        </el-dialog>


    </div>


    <script src="../../re/js/vue.min.js"></script>
    <script src="../../re/js/axios.min.js"></script>
    <script src="../../re/element-ui/index.js"></script>
    <script src="../../re/js/my.js"></script>

    <script>

        const onSelectionChange = function(arr){
           this.checkedCuses=arr;
        };

        const cusExecDel = function(){

            if(this.checkedCuses.length==0){
                this.$message({
                    showClose: true,
                    message: '您没有选择数据！',
                    type: 'error'
                });
                return;
            }

            let ids = [];
            for(let cus of this.checkedCuses){
                ids.push(cus.cus_id);
            }
            const loading = this.$loading({
                lock: true,
                text: '正在执行中...',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            $axios.delete('/info/customer/customer', {data:ids})
                .then(res => {
                    loading.close();
                    let result = res.data;
                    if (result.success) {
                       
                        this.getCustomerPage(this.page.pageNum);
                        this.$message({
                            message: result.message,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: result.message,
                            type: 'error'
                        });
                    }
                })
                .catch(err => {
                    loading.close();
                    console.log(err);
                });
        }

        const openCusAddWin = function () {

            this.cusAddWinVisible = true;


        };



        const cusExecAdd = function () {

            const loading = this.$loading({
                lock: true,
                text: '正在执行中...',
                background: 'rgba(0, 0, 0, 0.7)'
            });

            $axios.post('/info/customer/customer', this.newCus)
                .then(res => {
                    loading.close();
                    let result = res.data;
                    if (result.success) {
                        this.cusAddWinVisible = false;
                        this.getCustomerPage(this.page.pageTotal + 1);
                        this.$message({
                            message: result.message,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: result.message,
                            type: 'error'
                        });
                    }
                })
                .catch(err => {
                    loading.close();
                    console.log(err);
                });

            this.newCus = {};

        };


        const openCusUpdWin = function (oldCus) {

            this.oldCus = oldCus;
            this.cusUpdWinVisible = true;
        };

        const cusExecUpd = function () {
            console.log("----------------------------");
            console.log(this);
            console.log(this.oldCus);
            console.log("----------------------------");

            $axios.put('/info/customer/customer', this.oldCus)
                .then(res => {
                    //loading.close();
                    let result = res.data;
                    if (result.success) {
                        this.cusUpdWinVisible = false;
                        this.getCustomerPage(this.page.pageNum);
                        this.$message({
                            message: result.message,
                            type: 'success'
                        });
                    } else {
                        this.$message({
                            message: result.message,
                            type: 'error'
                        });
                    }
                })
                .catch(err => {
                    //loading.close();
                    console.log(err);
                });

            this.oldCus = {};
        };

        let vm = new Vue({
            el: '#app',
            data: {
                query: {
                    pageNum: 1,
                    pageSize: 5
                },
                page: {},
                cusAddWinVisible: false,//新增对话框是否可见
                newCus: {},

                cusUpdWinVisible: false,
                oldCus: {},

                checkedCuses:[]//选择的数据
            },
            methods: {

                onSelectionChange,//选择改变

                getCustomerPage(pageNum) {
                    this.query.pageNum = pageNum;
                    $axios.get('/info/customer/customer', { params: this.query })
                        .then(res => {
                            this.page = res.data;
                        })
                        .catch(err => {
                            console.log(err);
                        })
                },

                onCurrentChange(pageNum) {

                    this.getCustomerPage(pageNum);
                },

                onSizeChange(size) {
                    this.query.pageSize = size;
                    this.getCustomerPage(1);
                },

                openCusAddWin,//等同于 openCusAddWin:openCusAddWin
                cusExecAdd,
                openCusUpdWin,//打开修改窗口
                cusExecUpd,//执行修改
                cusExecDel

            },
            mounted() {
                this.getCustomerPage(1);
            }
        });




    </script>


</body>

</html>